<template>
  <div class="home-page">
    <PHeader class="main-header" />
    <div class="home-main">
      <PTools class="main-tools" />
      <PCanvas class="main-canvas" />
      <PEdits class="main-edits" />
    </div>
  </div>
</template>

<script>
import { onBeforeMount, reactive, onMounted } from 'vue'
import PHeader from '/@/pages/firstScreen/headerPage.vue'
import PTools from '/@/pages/firstScreen/toolsPage.vue'
import PCanvas from '/@/pages/firstScreen/canvasPage.vue'
import PEdits from '/@/pages/firstScreen/editsPage.vue'

export default {
    name: 'App',
    components: {
        PHeader,
        PTools,
        PCanvas,
        PEdits
    },
    setup() {
        const state = reactive({
            msg: '哈哈哈哈'
        })
        const toHome = () => {
            state.msg = '嘿嘿嘿'
            console.log(state.msg)
        }
        onMounted(() => {
            console.log('onMounted')
        })
        onBeforeMount(() => {
            // 在挂载前执行某些代码
            console.log(`onBeforeMount`)
        })
        return {
            state,
            toHome
        }
    }
}
</script>

<style scoped lang="less">
    .home-page {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .main-header {
            height: 70px;
            background: linear-gradient(to right, #fd746c, #ff9068);
        }
        .home-main {
            display: flex;
            flex: 1;
            .main-tools {
                background: rgb(255 255 255);
                width: 200px;
                padding: 10px;
                z-index: 2;
            }
            .main-canvas {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .main-edits {
                width: 300px;
                background: antiquewhite;
                z-index: 2;
            }
        }
    }
</style>
